<template>
  <view class="cell" @tap="clickCell" :style="{borderBottom: borderBottom ? '1px solid #ddd' : '', height: height}">
    <image class="cell-bg" :src="ossDomain + '/addressBook-item-bg.png'" mode="scaleToFill"></image>
    <view class="cell-body jh-align-center jh-space-between">
      <view class="font-B font-14" :style="{color: titleColor ? titleColor : '#BABABA'}">{{title || ''}}</view>
      <view class="jh-align-center">
        <slot></slot>
        <view class="font-B font-14" style="color: #9FA0A0;">{{rightValue || ''}}</view>
        <image v-if="rightIcon" class="margin-l13" style="width: 9px;height: 16px;display: block;"
          :src="ossDomain + '/cell-icon-right.png'"></image>
      </view>
    </view>
  </view>
</template>

<script>
  import {
    mapState,
    mapMutations
  } from 'vuex'
  export default {
    props: {
      title: {
        type: String | Number,
        value: ''
      },
      titleColor: {
        type: String,
        value: ''
      },
      rightIcon: {
        type: Boolean,
        value: true
      },
      rightValue: {
        type: String | Number,
        value: ''
      },
      borderBottom: {
        type: Boolean,
        value: true
      },
      height: {
        type: String | Number,
        value: '30px'
      },
    },
    data() {
      return {
        ossDomain: uni.ossDomain,

      }
    },
    methods: {
      clickCell () {
        this.$emit('click')
      }
    }
  };
</script>

<style lang="scss" scoped>
  .cell {
    width: 100%;
    height: 30px;
    position: relative;
    &-bg {
      width: 100%;
      height: 100%;
      position: absolute;
      z-index: 1;
    }
    &-body {
      position: relative;
      height: 100%;
      z-index: 2;
      padding: 0 24px;
    }
  }
</style>
